<template>
<el-form ref="big_form1" :label-position=" 'right' " label-width="90px"
				 :inline="true">

  <el-form-item label="月份选择">
    <el-date-picker
        v-model="month_to_daterange"
        type="month"
        start-placeholder="Start date"
        end-placeholder="End date"
        value-format="YYYY-MM"
        @change="cange_date_to_daterange"
    />
  </el-form-item>

	<!-- 日期范围 -->
	<el-form-item label="日期范围">
		<el-date-picker
			v-model="table1_use_data.datetime"
			type="daterange"
			range-separator="-"
			start-placeholder="Start date"
			end-placeholder="End date"
			value-format="YYYY-MM-DD"
		/>
	</el-form-item>

	<el-form-item>
		<el-button type="primary" @click="table1()">提交</el-button>
	</el-form-item>

	<el-form-item>
		<el-button type="primary" @click="download_table1()">下载表格（前端）</el-button>
		<el-button type="primary" @click="download_table2()">下载表格（后端）</el-button>
	</el-form-item>

</el-form>

<el-table :data="tableData1" id="table_balance">
	<el-table-column prop="handle_name" label="处理方名称"/>
	<el-table-column prop="qcye" label="期初余额" />
	<el-table-column prop="bqyf" label="本期应付" />
	<el-table-column prop="bqfk" label="本期付款" />
	<el-table-column prop="qmye" label="期末余额" />
</el-table>

</template>

<script setup lang="ts">

import {ElMessage, ElTable} from "element-plus";
import {reactive, ref} from "vue";
import {make_excel_file} from "@/hooks/make_excel_file.ts";
// import {HandleClassAutoCompletion} from "@/components/first/FuzzySearchHandleClass.vue";
// import {HandleAutoCompletion} from "@/components/first/FuzzySearchHandle.vue";
import {HandleBalanceTableCRUDResponse, HandleBalanceTableList} from "@/api/first/HandleManagement/type.ts";
import {MakeBalanceTable, reqHandleBalanceTable} from "@/api/first/HandleManagement";
// import {length} from "file-saver";


// 表格1：出入库表
const tableData1 = ref<HandleBalanceTableList[]>([]) // ref数据


const table1_use_data = reactive<{
	datetime: [string, string] | null
	trend:boolean
	handle_id: number | ''
	group_id: number | ''
}>({
	datetime: null,
	trend: false,
	handle_id: '',
	group_id: '',
})
// 下载table1
const download_table1 = () => {
	make_excel_file('余额表', 'table_balance')
}
// 返回table1数据
const table1 = () => {
	if(table1_use_data.datetime === null){
		ElMessage.warning('请输入日期范围')
		return
	}
	let date_start: string = table1_use_data.datetime[0]
	let date_stop: string = table1_use_data.datetime[1]
	reqHandleBalanceTable({
		date_start: date_start,
		date_end: date_stop,
		mode: 'json',
	}).then((result: HandleBalanceTableCRUDResponse)=>{
		tableData1.value = result.data
		ElMessage.success(result.success?.message)
	})
}


const download_table2 = () => {
	if(table1_use_data.datetime === null){
		ElMessage.warning('请输入日期范围')
		return
	}
	let date_start: string = table1_use_data.datetime[0]
	let date_stop: string = table1_use_data.datetime[1]
	MakeBalanceTable({
		date_start: date_start,
		date_end: date_stop,
		mode: 'xls',
	})
}

// 月份转日期函数
const month_to_daterange = ref('')
const cange_date_to_daterange = () => {
  // 获取年份和月份
  let temp = month_to_daterange.value.split('-')
  let year = temp[0]
  let month = temp[1]

  switch (month) {
    case '01':
      table1_use_data.datetime = [`${year}-01-01`, `${year}-01-28`]
      break
    case '02':
      let temp = parseInt(year)
      if((temp%4==0 && temp%100!=0)||(temp%400==0)){
        table1_use_data.datetime = [`${year}-01-29`, `${year}-02-29`]
      }else{
        table1_use_data.datetime = [`${year}-01-29`, `${year}-02-28`]
      }
      break
    case '03':
      table1_use_data.datetime = [`${year}-03-01`, `${year}-03-28`]
      break
    case '04':
      table1_use_data.datetime = [`${year}-03-29`, `${year}-04-28`]
      break
    case '05':
      table1_use_data.datetime = [`${year}-04-29`, `${year}-05-28`]
      break
    case '06':
      table1_use_data.datetime = [`${year}-05-29`, `${year}-06-28`]
      break
    case '07':
      table1_use_data.datetime = [`${year}-06-29`, `${year}-07-28`]
      break
    case '08':
      table1_use_data.datetime = [`${year}-07-29`, `${year}-08-28`]
      break
    case '09':
      table1_use_data.datetime = [`${year}-08-29`, `${year}-09-28`]
      break
    case '10':
      table1_use_data.datetime = [`${year}-09-29`, `${year}-10-28`]
      break
    case '11':
      table1_use_data.datetime = [`${year}-10-29`, `${year}-11-28`]
      break
    case '12':
      table1_use_data.datetime = [`${year}-11-29`, `${year}-12-31`]
      break
  }


}
</script>

<style scoped>

</style>